﻿﻿﻿

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Lei Shi">
    <meta http-equiv="Cache-Control" content="o-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">


    <title>个人中心 - 学习课程</title>


    <meta content="实验楼课程分为基础课和项目课，内容涵盖了Linux、Python、Java、C语言、Ruby、Android、IOS开发、大数据、信息安全等IT技术领域。" name="description">
    <meta content="实验楼课程,IT培训课程,IT实训课程,IT在线课程,all" name="keywords">

    <meta content="实验楼,琛石科技" name="author">

    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="../../static/font-awesome//4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">
    <link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
    <link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
    <link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">

    <style>
        @font-face {
            font-family: "lantingxihei";
            src: url("../fonts/FZLTCXHJW.TTF");
        }

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }

        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size: 14px;
        }

        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }

        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }

        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }

        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>

    <style>
        a:hover,
        a:focus {
            text-decoration: none;
        }

        span.label {
            display: inline-block;
            margin: 10px 3px 16px 3px;
            padding: 6px 16px;
            border: none;
            font-size: 14px;
            font-weight: 100;
        }

        span.label-default {
            color: #999;
            background: none;
        }

        span.label-success {
            color: #0c9;
            background: #E7F8F2;
        }

        .userinfo-banner [data-toggle="tooltip"] {
            display: inline-block;
            border-bottom: dashed 1px #999;;
            color: #999 !important;
        }

        .certificate-item {
            padding-top: 10px;
        }

        .certificate-item a {
            color: #444;
        }
    </style>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="../js/jquery-3.5.0.js"></script>
    <script src="../js/http.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/ReadState.js"></script>
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top header">
    <script src="../js/header.js"></script>
</nav>


<div id="app1">
    <div class="container layout">
        <div class="row">
            <div class="col-md-12 layout-body">
                <div class="content">
                    <ul class="nav nav-tabs" rolw="tablist">
                        <li role="presentation">
                            <a href="study.html" role="tab">个人信息</a>
                        </li>
                        <li role="presentation" class="active ">
                            <a href="reports.html" role="tab">学习课程</a>
                        </li>
                        <li role="presentation">
                            <a href="blog.html" role="tab">博文管理</a>
                        </li>
                        <li role="presentation" >
                            <a href="label.html" role="tab">标签管理</a>
                        </li>
                        <li role="presentation" >
                            <a href="advice.html" role="tab" id="remind">消息中心</a>
                        </li>

                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active">
                            <div class="row">
                                <div class="col-md-12">
                                    <a>
                                        <span @click="getOrders()" href="#" class="label label-success">已购课程</span>
                                    </a>

                                    <a>
                                        <span @click="getStudyTrace" href="#" class="label label-success">已学课程</span>
                                    </a>
                                </div>
                            </div>

                            <div class="row" >
                                <div v-for="item in OrderOrStudy"  >
                                    <div class="col-xs-3" v-for="list in item">
                                        <a class="course-box" href="#" >
                                            <div class="sign-box">
                                            </div>
                                            <div class="course-img">
                                                <img :src="list.course.imgUrl" @click="step(list.course.id)">
                                            </div>
                                            <div class="course-body">
                                    <span class="course-title" data-toggle="tooltip"
                                          data-placement="bottom"
                                          :title="list.course.title">{{list.course.title}}</span>
                                            </div>
                                            <div class="course-footer">
                                    <span class="course-per-num pull-left">
                                        <i class="fa fa-users"></i>
                                        {{list.course.money}}
                                    </span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<div id="base-data"


     data-flash="false"


     data-is-login=false

     data-is-jwt=true
     data-socket-url="wss://comet.shiyanlou.com"
     data-msg-user=""
     data-msg-system=""
></div>
<script src="../app/dest/lib/lib.js?=2016121272249"></script>
<script src="../static/jquery/2.2.4/jquery.min.js"></script>
<script src="../static/ace/1.2.5/ace.js"></script>
<script src="../static/aliyun/aliyun-oss-sdk-4.3.0.min.js"></script>
<script src="../static/highlight.js/9.8.0/highlight.min.js"></script>
<script src="../static/jspdf/1.2.61/jspdf.min.js"></script>
<script src="../static/plupload/2.1.9/js/plupload.full.min.js"></script>
<script src="../static/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
<script src="../static/videojs/video.min.js"></script>
<script src="../static/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
<script src="../static/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="../static/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../static/bootstrap-table/1.11.0/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

<script src="../static/ravenjs/3.7.0/raven.min.js"></script>


<script src="../app/dest/user/index.js?=2016121272249"></script>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 clearfix footer-col">
                <img src="../img/logo_03.png">
                <div class="footer-slogan">动手做实验，轻松学编程</div>
                <div class="col-xs-2">
                    <div class="social-item footer-weixin-item">
                        <i class="fa fa-weixin"></i>
                        <div class="footer-weixin">
                            <img src="../img/footer-weixin.png">
                        </div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="social-item footer-qq-item">
                        <i class="fa fa-qq"></i>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="social-item footer-weibo-item">
                        <a href="http://weibo.com/shiyanlou2013" target="_blank">
                            <i class="fa fa-weibo"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">公司</div>
                <a href="../../aboutus/index.html" target="_blank">关于我们</a><br>
                <a href="../../contact/index.html" target="_blank">联系我们</a><br>
                <a href="http://www.simplecloud.cn/jobs.html" target="_blank">加入我们</a><br>
                <a href="https://blog.shiyanlou.com" target="_blank">技术博客</a><br>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">合作</div>
                <a href="../../contribute/index.html" target="_blank">我要投稿</a><br>
                <a href="../../labs/index.html" target="_blank">教师合作</a><br>
                <a href="../../edu/index.html" target="_blank">高校合作</a><br>
                <a href="../../friends/index.html" target="_blank">友情链接</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">服务</div>
                <a href="../bootcamp/index.html" target="_blank">实战训练营</a><br>
                <a href="../vip/index.html" target="_blank">会员服务</a><br>
                <a href="../../courses/reports/index.html" target="_blank">实验报告</a><br>
                <a href="../../questions/index.html?tag=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"
                   target="_blank">常见问题</a><br>
                <a href="../privacy/index.html" target="_blank">隐私条款</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">学习路径</div>
                <a href="../../paths/python/index.html" target="_blank">Python学习路径</a><br>
                <a href="../../paths/linuxdev/index.html" target="_blank">Linux学习路径</a><br>
                <a href="../../paths/bigdata/index.html" target="_blank">大数据学习路径</a><br>
                <a href="../../paths/java/index.html" target="_blank">Java学习路径</a><br>
                <a href="../../paths/php/index.html" target="_blank">PHP学习路径</a><br>
                <a href="../paths/index.html" , target="_blank">全部</a>
            </div>
        </div>
    </div>
    <div class="text-center copyright">
        <span>Copyright @2013-2016 实验楼在线教育</span>
        <span class="ver-line"> | </span>
        <a href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备13019762号</a>

    </div>
</div>


</body>
</html>


<script>
    let user = JSON.parse(sessionStorage.getItem("User"));

    let ListOrderOrStudy = [];


    let page = {
        page: 1,
        pageSize: 8,
        userId:user.id
    }

    $(function () {
        app1.getOrders();
        //判断是否有未读消息
        messageRemind();
    })

    let app1 = new Vue({
        el: '#app1',
        data: {

            clicked: false,
            OrderOrStudy: ListOrderOrStudy,
            pageQO: page,

        },
        methods: {

            getOrders() {
                ListOrderOrStudy.length = 0;
                $.ajax({
                    xhrFields:{
                        withCredentials:true
                    },
                    type: "POST",
                    //contentType: "multipart/form-data;charset=UTF-8",
                    url: baseUrl+"education_api/orders/selectOrdersByIdPage",
                    data: page,
                    success: function (resp) {
                        //http 获得结果
                        console.log("===resp===");

                        ListOrderOrStudy.push(resp.data)
                        console.log(ListOrderOrStudy);

                    }
                });
            },

            getStudyTrace() {

                ListOrderOrStudy.length = 0;
                $.ajax({
                    xhrFields:{
                        withCredentials:true
                    },
                    type: "POST",
                    //contentType: "multipart/form-data;charset=UTF-8",
                    url: baseUrl+"education_api/studyTrace/selectStudyTraceByPage",
                    data: page,
                    success: function (resp) {
                        //http 获得结果
                        console.log("===resp===");

                        ListOrderOrStudy.push(resp.data)

                        console.log(ListOrderOrStudy)

                    }
                });
            },
            step:function(id){
                location.href = "../courses/course_detail.html?"+id;
            }

        },
    });
</script>
